"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Init = void 0;
require("./index.less");
var define_1 = require("./models/define");
var statistic_1 = require("./statistic");
var toolbox_1 = require("./toolbox");
var containerClassName = 'my-monitor-charts';
/**
 * init class
 */
var Init = /** @class */ (function () {
    function Init(dom, config, echartConfig) {
        this.dom = dom;
        this.config = config;
        this.echartConfig = echartConfig;
        this.option = {
            title: {
                left: 'center',
                text: 'Monitor',
                // textStyle: {
                //     color: 'red'
                // }
            },
            legend: {
                type: 'scroll',
                show: false,
                // right: '5',
                top: 'center',
                orient: 'vertical',
                textStyle: {
                    color: 'red'
                }
            },
            tooltip: {
                trigger: 'axis',
                // position: function (pt) {
                //     return [pt[0], '10%'];
                // }
            },
            // toolbox: {
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none'
            //         },
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {
                type: 'time',
                boundaryGap: false,
                axisLabel: {},
                name: 'name',
                nameTextStyle: {
                    color: 'red'
                },
                nameGap: 0
            },
            yAxis: {
                type: 'value',
                name: 'val'
                // boundaryGap: [0, '100%']
            },
            grid: {
                left: 50,
                right: 35,
                bottom: 35
            },
            // dataZoom: [{
            //     type: 'inside',
            //     start: 0,
            //     end: 100
            // }, {
            //     start: 0,
            //     end: 100
            // }],
            // series: [
            //     {
            //         name: '模拟数据',
            //         type: 'line',
            //         //smooth: true,
            //         symbol: 'none',
            //         // areaStyle: {},
            //         data: data
            //     }
            // ]
            // series: mockSeries
        };
        this.config = $.extend(true, {}, new define_1.ChartConfig(), this.config, echartConfig);
        $(dom).addClass(containerClassName);
        this.$canvasContainer = $('<div class="chart-canvas-container"></div>');
        $(dom).append(this.$canvasContainer);
        this.$info = $('<div class="chart-info"></div>');
        $(dom).append(this.$info);
        this.init();
        this.statisticUnit = new statistic_1.StatisticUnit(this.myChart, this.$info, this.dom);
        this.statisticUnit.calcStatistic();
        this.toolboxUnit = new toolbox_1.ToolBoxUnit(this.myChart, this.$canvasContainer, this.config, dom);
    }
    Init.prototype.init = function () {
        // if (this.config.legendPosition === 'bottom') {
        //     this.option.grid = {
        //         left: 50,
        //         right: 50,
        //         bottom: 300
        //     };
        //     this.option.legend!.bottom = '5';
        //     this.option.legend!.left = '0';
        // } else {
        //     this.option.legend!.right = '5';
        //     this.option.legend!.top = 'center';
        //     this.option.grid = {
        //         left: 50,
        //         right: 125
        //     };
        // }
        var _this = this;
        if (this.config.legendPosition === 'bottom') {
            $(this.dom).addClass('bottom-info');
            this.$info.height(this.config.infoHeight);
        }
        else {
            $(this.dom).addClass('right-info');
            this.$info.width(this.config.infoWidth);
        }
        this.option.title.text = this.config.title;
        this.option.yAxis.name = this.config.unit;
        if (this.config.timeAxisFormatter) {
            this.option.xAxis.axisLabel.formatter = function (value, index) {
                try {
                    var tempDate = new Date(value);
                    return dateFormatter(tempDate, _this.config.timeAxisFormatter);
                }
                catch (e) {
                    console.error('value formatter fail,', value);
                    return '';
                }
            };
        }
        this.myChart = echarts.init(this.$canvasContainer[0]);
        this.myChart.setOption(this.option);
        this.ckeckResizeEvent();
    };
    Init.prototype.ckeckResizeEvent = function () {
        var _this = this;
        if ($(this.dom).attr('pre-width') != $(this.dom).width() ||
            $(this.dom).attr('pre-height') != $(this.dom).height()) {
            this.onResize();
            $(this.dom).attr('pre-width', $(this.dom).width());
            $(this.dom).attr('pre-height', $(this.dom).height());
        }
        setTimeout(function () {
            _this.ckeckResizeEvent();
        }, 500);
    };
    Init.prototype.onResize = function () {
        var _a;
        this.myChart.resize();
        (_a = this.statisticUnit) === null || _a === void 0 ? void 0 : _a.fixContentWidth();
    };
    Init.prototype.setData = function (data) {
        var _this = this;
        var mockSeries = data.map(function (item) {
            return {
                name: item.target,
                data: item.datapoints.map(function (item2) {
                    return [item2[1], item2[0]];
                }),
                type: 'line',
                symbol: 'none',
                smooth: true,
                areaStyle: _this.config.seriesAreaStyle
                // lineStyle: {
                //     normal: {
                //         color: '#ccc'
                //     }
                // }
            };
        });
        this.myChart.setOption({
            series: mockSeries
        });
        this.statisticUnit.calcStatistic();
    };
    /**
     * on selected day view
     * @param cb event callback
     */
    Init.prototype.onSelectDayView = function (cb) {
        this.toolboxUnit.dayClickEvents.push(cb);
    };
    Init.prototype.onSelectWeekView = function (cb) {
        this.toolboxUnit.weekClickEvents.push(cb);
    };
    Init.prototype.onSelectMonthView = function (cb) {
        this.toolboxUnit.monthClickEvents.push(cb);
    };
    Init.prototype.selectDayMode = function () {
        this.toolboxUnit.selectMode('day');
    };
    Init.prototype.selectWeekMode = function () {
        this.toolboxUnit.selectMode('week');
    };
    Init.prototype.selectMonthMode = function () {
        this.toolboxUnit.selectMode('month');
    };
    return Init;
}());
exports.Init = Init;
// 将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// "yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// "yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
function dateFormatter(date, fmt) {
    var config = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),
        "S": date.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var key in config)
        if (new RegExp("(" + key + ")").test(fmt)) {
            var replaceStr = '';
            if (RegExp.$1.length === 1) {
                replaceStr = config[key];
            }
            else {
                replaceStr = ("00" + config[key]).substr(("" + config[key]).length);
            }
            fmt = fmt.replace(RegExp.$1, replaceStr);
        }
    return fmt;
}
